<template>
  <div
    class="row q-px-md q-py-sm items-center"
    :class="useLightOrDark('bg-white shadow-up-3', 'shadow-up-1')"
  >
    <div class="col text-grey-7 text-h6">合计：</div>
    <div
      class="col text-h6 text-right"
      :class="useAmountColor(entriesStore.totalAmount)"
    >
      <div class="row">
        <div class="col">
          {{ useAmountFormat(entriesStore.totalAmount) }}
        </div>
      </div>
      <div class="row" v-if="entriesStore.totalAmountPaid">
        <div class="col text-caption text-grey-6">
          已完成：
          <span
            class="text-weight-bold"
            :class="useAmountColor(entriesStore.totalAmountPaid)"
          >
            {{ useAmountFormat(entriesStore.totalAmountPaid) }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useEntriesStore } from "src/stores/storeEntries";
import {
  useAmountColor,
  useAmountFormat,
  useLightOrDark,
} from "src/hooks/useCurrencify";

const entriesStore = useEntriesStore();

defineOptions({
  name: "Total",
});
</script>
